<template>
  <view class="home-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar-container">
      <view class="custom-navbar">
        <view class="navbar-title">我的</view>
      </view>
      <view style="display: flex; align-items: center">
        <view class="user-profile-section" style="width: 90%" @click="goToPersonalInfo">
          <view class="user-avatar">
            <view class="avatar-placeholder">
              <uv-avatar :size="50" :src="userInfo.avatar"></uv-avatar>
            </view>
          </view>
          <view class="user-info">
            <view class="user-name">{{ userInfo.username }}</view>
            <view class="user-phone">{{ userInfo.mobile }}</view>
          </view>
        </view>
        <view class="navbar-settings" @click="goToSettings">
          <uv-icon name="setting" size="20" color="#666"></uv-icon>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="scroll-view">
      <view class="content-area">
        <!-- 菜单列表 -->
        <view class="menu-list">
          <view class="menu-item" @click="goSij">
            <view class="menu-icon">
              <uv-icon name="account" :size="24" :color="'#FF6B35'"></uv-icon>
            </view>
            <view class="menu-text">司机认证</view>
            <view class="menu-arrow">
              <text v-if="userInfo.isdriver == 1" style="color: #999;">已认证</text>
              <uv-icon v-else name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>

          <view class="menu-item" @click="goToRealNameAuth">
            <view class="menu-icon">
              <uv-icon name="checkmark-circle" :size="24" :color="'#FF6B35'"></uv-icon>
            </view>
            <view class="menu-text">实名认证</view>
            <view class="menu-arrow">
              <text v-if="userInfo.isrealdriver == 1" style="color: #999;">已认证</text>
              <uv-icon v-else name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>

          <view class="menu-item">
            <view class="menu-icon">
              <uv-icon name="zhifubao-circle-fill" :size="24" :color="'#FF6B35'"></uv-icon>
            </view>
            <view class="menu-text">累计派单量</view>
            <view class="menu-arrow"> {{ userInfo.totalorder || 0 }}单 </view>
          </view>

          <view class="menu-item">
            <view class="menu-icon">
              <uv-icon name="gift" :size="24" :color="'#FF6B35'"></uv-icon>
            </view>
            <view class="menu-text">剩余油量</view>
            <view class="menu-arrow"> {{ userInfo.vehicle_remaining }}(升) </view>
          </view>

          <view class="menu-item" @click="goToRoleSwitch">
            <view class="menu-icon">
              <uv-icon name="list" :size="24" :color="'#FF6B35'"></uv-icon>
            </view>
            <view class="menu-text">角色切换</view>
            <view class="menu-tag">当前为司机端</view>
            <view class="menu-arrow">
              <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="tabbar-container">
      <DriverTabBar />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import DriverTabBar from '@/components/tabbar/DriverTabBar.vue'
import { useRequest } from '@/api'
const { API_MEMBER_INFO, API_MEMBER_SWITCH } = useRequest()
import { UserInfoManager } from '@/utils/userInfo'
import { useAppStore } from '@/store/app'
const appStore = useAppStore()
const userInfo = ref({
  avatar: '',
  username: '',
  mobile: '',
  totalorder: 0,
  vehicle_remaining: 0,
  isrealdriver: 1,
  isdriver: 1
})
const goToSettings = () => {
  uni.navigateTo({
    url: '/user/mine/settings'
  })
}

const goToPersonalInfo = () => {
  uni.navigateTo({
    url: '/user/mine/personal'
  })
}

const goSij = () => {
  if (userInfo.value.isdriver == 1) {
    return
  }
  uni.navigateTo({
    url: '/driver/personalCenter/driverCer'
  })
}
const goToRealNameAuth = () => {
  if (userInfo.value.isrealdriver == 1) {
    return
  }
  uni.navigateTo({
    url: '/user/mine/realNameAuth'
  })
}
const goToRoleSwitch = async () => {
  const params = {
    isdriver: UserInfoManager.lastrole(),
    status: 'pass',
    sort: 'id',
    order: 'desc',
    page: 1,
    page_size: 10
  }
  const res = await API_MEMBER_SWITCH(params)
  if (res.code === 1) {
    initFormData()
    setTimeout(() => {
      uni.reLaunch({ url: '/user/home/index' })
    }, 500)
  }
}
const initFormData = async () => {
  const params = {
    isdriver: UserInfoManager.lastrole()
  }
  const res = await API_MEMBER_INFO(params)
  if (res.code === 1) {
    userInfo.value = res.data
    UserInfoManager.setUserInfo(res.data)
    appStore.setUserInfo(res.data)
  }
}
onShow(() => {
  initFormData()
})
</script>

<style lang="scss" scoped>
.custom-navbar-container {
  position: relative;
  height: 340rpx;
  background: linear-gradient(to bottom, #fcefdd, #f8f9fa);
}

// 自定义导航栏
.custom-navbar {
  position: relative;
  height: 200rpx;
  padding: 0 32rpx;

  .navbar-title {
    font-size: 36rpx;
    font-weight: 600;
    line-height: 280rpx;
    color: #333;
    text-align: center;
  }

  .navbar-settings {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
    padding: 16rpx;
  }
}

.scroll-view {
  flex: 1;
  background: #f8f9fa;
}

.content-area {
  padding: 32rpx;
}

// 用户信息区域
.user-profile-section {
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;

  display: flex;
  align-items: center;

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    overflow: hidden;
    margin-right: 24rpx;

    display: flex;
    align-items: center;
    justify-content: center;

    .avatar-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }

  .user-info {
    flex: 1;

    .user-name {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }

    .user-phone {
      font-size: 28rpx;
      color: #999;
    }
  }
}

// 菜单列表
.menu-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.2s ease;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f8f9fa;
    }

    .menu-icon {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
    }

    .menu-text {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }

    .menu-tag {
      background: #ff6b35;
      color: #fff;
      font-size: 22rpx;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      margin-right: 16rpx;
    }

    .menu-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
</style>
